<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters for drawing
        const centerX = 210;
        const centerY = 200;
        const radiusR = 150;
        const sideL = 140;
        const xSize = 7; // Half-size of the 'x' marks

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        // Helper function to draw an 'x' mark
        function drawX(x, y) {
            ctx.beginPath();
            ctx.moveTo(x - xSize, y - xSize);
            ctx.lineTo(x + xSize, y + xSize);
            ctx.moveTo(x + xSize, y - xSize);
            ctx.lineTo(x - xSize, y + xSize);
            ctx.stroke();
        }

        // 1. Draw the circular region of the magnetic field
        ctx.beginPath();
        ctx.arc(centerX, centerY, radiusR, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the square coil abcd
        const ax = centerX;
        const ay = centerY - sideL / 2;
        const bx = centerX + sideL;
        const by = ay;
        const cx = bx;
        const cy = centerY + sideL / 2;
        const dx = ax;
        const dy = cy;

        ctx.beginPath();
        ctx.moveTo(ax, ay);
        ctx.lineTo(bx, by);
        ctx.lineTo(cx, cy);
        ctx.lineTo(dx, dy);
        ctx.closePath();
        ctx.stroke();

        // 3. Draw the 'x' marks representing the magnetic field
        const xPositions = [
            { x: centerX - 90, y: centerY - 90 },
            { x: centerX + 40, y: centerY - 100 },
            { x: centerX - 100, y: centerY - 20 },
            { x: centerX - 50, y: centerY + 20 },
            { x: centerX - 80, y: centerY + 90 },
            { x: centerX, y: centerY + 120 },
            { x: centerX + 70, y: centerY - 40 },
            { x: centerX + 70, y: centerY + 40 },
            { x: centerX + 135, y: centerY - 30 },
            { x: centerX + 135, y: centerY + 30 },
            { x: centerX + 50, y: centerY + 110 }
        ];
        xPositions.forEach(pos => drawX(pos.x, pos.y));

        // 4. Draw the point O (center)
        ctx.beginPath();
        ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
        ctx.fill();

        // 5. Add all the labels
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Labels for the square vertices
        ctx.fillText('a', ax - 5, ay - 15);
        ctx.fillText('b', bx + 5, by - 15);
        ctx.fillText('c', cx + 5, cy + 15);
        ctx.fillText('d', dx - 5, dy + 15);

        // Label for the center O
        ctx.textAlign = 'right';
        ctx.fillText('O', centerX - 10, centerY);

        // Label for the radius R
        ctx.textAlign = 'center';
        ctx.fillText('R', centerX - 100, centerY + 60);

        // 6. Add the caption below the diagram
        ctx.font = '20px "SimSun", "Songti SC", serif';
        ctx.textAlign = 'center';
        ctx.fillText('习题 9-17 图', canvas.width / 2, canvas.height - 30);
    </script>
</body>
</html>